<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: grid;
            width: 800px;
            height: 600px;
            margin: 2px auto;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
            /* place-items: center; */
        }

        .container div {
            border: 1px solid #000;
            text-align: center;
            line-height: 100px;
        }

        .container div:hover {
            border-radius: 10px;
            box-shadow: inset 0 0 0 2px #000;
        }
    </style>
  </head>

  <body>

    <div class="container">
      <div>1</div>

      <div>2</div>

      <div>3</div>

      <div>4</div>

      <div>5</div>

      <div>6</div>

      <div>7</div>

      <div>8</div>

      <div>9</div>

      <div>10</div>

      <div>11</div>

      <div>12</div>

      <div>13</div>

      <div>14</div>

      <div>15</div>

      <div>16</div>

      <div>17</div>

      <div>18</div>

      <div>19</div>

      <div>20</div>

      <div>21</div>

      <div>22</div>

      <div>23</div>

      <div>24</div>

      <div>25</div>

      <div>26</div>

      <div>27</div>

      <div>28</div>

      <div>29</div>

      <div>30</div>
    </div>
  </body>

</html>
